<template>
  <div class="common-card-info">
    <!-- 活动标题 实训介绍 实训时间 实训人数 实训场地 -->
    <div class="title">2024天融信&华中科技大学实训活动</div>
    <div class="content">
      <div class="content-text">实训介绍</div>
      <div class="content-info">
        近年来，网络安全人才需求与日俱增、人才缺口越来越大，在人才培养方面，天融信联合华中科技大学，通过校企协同育人的
        方式，以实际岗位技能需求为出发点，共同培养有实战能力、有优秀技能的网络安全人才，搭建一套科学的以人为本、以能力
        产出为导向的人才培养体系和产教融合、协同育人的教育教学模式，加强校企双方长期合作，在产学研、人才培养、社会服务
        等方面带来更广阔的发展前景，也为社会培养出更多的网络安全优秀人才。
      </div>
    </div>
    <div class="time">
      <div class="time-text">实训时间</div>
      <div class="time-info">2024年5月1日-2024年5月10日</div>
    </div>
    <div class="number">
      <div class="number-text">实训人数</div>
      <div class="number-info">300人</div>
    </div>
    <div class="place">
      <div class="place-text">实训场地</div>
      <div class="place-info">华中科技大学网安学院B59教室</div>
    </div>
    <!-- 查看详情按钮 -->
    <div class="button-common-default switch-detail">查看详情</div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.common-card-info {
  height: 410px;
  width: 100%;
  // 背景图片
  background: url(../../assets/images/cardInfo.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 36px 90px;
  .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 22px;
    color: #3f3f3f;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .switch-detail {
    margin-top: 20px;
    width: 92px;
    float: right;
    // display: flex;
    // align-items: center;
    // justify-content: flex-end;
  }
  .content,
  .time,
  .number,
  .place {
    display: flex;
    margin-top: 28px;
    margin-left: 84px;
    .content-text,
    .time-text,
    .number-text,
    .place-text {
      width: 100px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #3f3f3f;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .content-info,
    .time-info,
    .number-info,
    .place-info {
      flex: 1;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #707070;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
